<template>
    <div class="brandStory">
        <div class="banner">
            <div class="bannerCont">
                <h2 class="title">The world's leading AI sex toy brand</h2>
                <p class="subTitle">Real-time, tailored, connecting deep desires</p>
            </div>
        </div>
        <p class="instructions">Unlike other sex toy brands, we don’t just provide devices that simply vibrate; we
            personalize them to you, simulating<br> the connection and pleasure you'd feel with a real-life person or a
            character from fiction, movies, games, your<br> imagination, or beyond with the help of Matelink AI.</p>.
        <div class="description">
            <h2 class="title">What is Matelink AI</h2>
            <p class="desc">Matelink AI is an interactive AI technology intuitively learns your preferences and mirrors
                human emotions; it is just like your real-life best friends or intimate partner but offers a responsive
                companion that adapts to meet your needs in real time. By connecting the sex toy to it, you are getting
                your toy controlled by your desired AI partner. </p>
            <p class="btn">Learn More ></p>
        </div>
        <div class="ourMission">
            <div class="cont">
                <h2 class="title">Our Mission</h2>
                <h3 class="subTitle">Redefine intimacy</h3>
                <p class="desc">We redefine intimate experiences through innovative AI technology, fulfilling every deep
                    desire</p>
            </div>
            <img src="@/assets/images/brandStory_ourMission_pic.png" class="pic">
        </div>
        <div class="ourVision">
            <img src="@/assets/images/brandStory_ourVision_pic.png" class="pic">
            <div class="cont">
                <h2 class="title">Our Vision</h2>
                <h3 class="subTitle">Leader in intimacy</h3>
                <p class="desc">We aim to become the global leader in intimacy, enabling every individual to forge the
                    most authentic and personalized emotional connections</p>
            </div>
        </div>
        <div class="ourCores">
            <h2 class="title">Our core values</h2>
            <div class="cont" v-if="!isMobile">
                <div class="core" v-for="item in coreList" :key="item.title">
                    <img :src="item.pic">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.desc }}</p>
                </div>
                <!-- <div class="core">
                    <img src="@/assets/images/brandStory_core1.svg">
                    <h3>Innovation</h3>
                    <p>We are committed to continuous innovation, leveraging AI technology to deliver unprecedented
                        intimate experiences.</p>
                </div>
                <div class="core">
                    <img src="@/assets/images/brandStory_core2.svg">
                    <h3>Personalization</h3>
                    <p>Every individual's needs are unique, so we provide tailored solutions to meet personal desires
                        and emotional needs.</p>
                </div>
                <div class="core">
                    <img src="@/assets/images/brandStory_core3.svg">
                    <h3>Client-Centricity</h3>
                    <p>Our top priority is our users' satisfaction and happiness, and we are dedicated to delivering an
                        exceptional user experience.</p>
                </div>
                <div class="core">
                    <img src="@/assets/images/brandStory_core2.svg">
                    <h3>Real-Time</h3>
                    <p>We prioritize real-time responsiveness, ensuring every user's emotions are cared for and
                        satisfied whenever needed.</p>
                </div>
                <div class="core">
                    <img src="@/assets/images/brandStory_core3.svg">
                    <h3>Deep Connection</h3>
                    <p>We aim to establish deeper emotional connections by focusing on creating meaningful bonds with
                        our users.</p>
                </div> -->
                <div class="core filler"></div>
            </div>
            <div class="cont" v-else>
                <el-carousel :autoplay="false" arrow="always" indicator-position="none">
                    <el-carousel-item v-for="item in coreList" :key="item.title">
                        <div class="core">
                            <img :src="item.pic">
                            <h3>{{ item.title }}</h3>
                            <p>{{ item.desc }}</p>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="future">
            <h2 class="title">Create the future with us</h2>
            <p class="desc">Dive into our creations. You will see what we are doing and how we are doing it.</p>
            <ProductCard />
        </div>
        <div class="others">
            <div class="left">
                <h2 class="title">10% off<br> to get your start</h2>
                <p class="desc">Sign up to receive our latest news, offers, treats, and more, and receive a 10% discount
                    for
                    your next purchase.</p>
                <div class="inputBox">
                    <el-input placeholder="Your Email address" v-model="email"></el-input>
                    <div class="submit" @click="submit">
                        <el-icon>
                            <Top />
                        </el-icon>
                    </div>
                </div>
                <p class="tips">*You can unsubscribe from our marketing emails at any time.</p>
            </div>
            <div class="right">
                <h2 class="title">Become<br> Matelink affiliate</h2>
                <p class="desc">Share and earn up to 15% commission rate.</p>
                <p class="btn">Learn More</p>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import ProductCard from '@/components/ProductCard.vue';
import corePic1 from '@/assets/images/brandStory_core1.svg';
import corePic2 from '@/assets/images/brandStory_core2.svg';
import corePic3 from '@/assets/images/brandStory_core3.svg';

import { ref, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { addSubscribe } from '@/api/common';

const app = getCurrentInstance();
const isMobile = app?.appContext.config.globalProperties.$isMobile;
const email = ref('');

const coreList = [
    {
        pic: corePic1,
        title: 'Innovation',
        desc: 'We are committed to continuous innovation, leveraging AI technology to deliver unprecedented intimate experiences.'
    },
    {
        pic: corePic2,
        title: 'Personalization',
        desc: 'Every individual\'s needs are unique, so we provide tailored solutions to meet personal desires and emotional needs.'
    },
    {
        pic: corePic3,
        title: 'Client-Centricity',
        desc: 'Our top priority is our users\' satisfaction and happiness, and we are dedicated to delivering an exceptional user experience.'
    },
    {
        pic: corePic2,
        title: 'Real-Time',
        desc: 'We prioritize real-time responsiveness, ensuring every user\'s emotions are cared for and satisfied whenever needed.'
    },
    {
        pic: corePic3,
        title: 'Deep Connection',
        desc: 'We aim to establish deeper emotional connections by focusing on creating meaningful bonds with our users.'
    }
];

const submit = async () => {
    //验证邮箱是否是正确的邮箱格式
    const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    if (!reg.test(email.value)) {
        ElMessage({
            message: 'Invalid Email',
            type: 'warning'
        });
        return;
    } else {
        //todo
        const params = {
            email: email.value
        };
        const res: any = await addSubscribe(params);
        if (res.code === '000000') {
            ElMessage({
                message: 'Discount received successfully, enter this email address on the payment order page to get the discount.',
                type: 'success'
            });
        } else {
            ElMessage({
                message: res.message,
                type: 'error'
            });
        }
    }

}
</script>
<style scoped lang="scss">
.brandStory {
    .banner {
        width: 100%;
        height: 736px;
        background: url('~@/assets/images/brandStory_banner.png') rgba(0, 0, 0, 1) no-repeat center;
        display: flex;
        align-items: end;

        .bannerCont {
            text-align: center;
            width: 100%;
            padding-bottom: 83px;
            color: #fff;

            .title {
                font-size: 50px;
                line-height: 60px;
                font-weight: 700;
            }

            .subTitle {
                font-size: 40px;
                line-height: 60px;
                font-weight: 400;
            }
        }
    }

    .instructions {
        font-size: 28px;
        line-height: 42px;
        font-weight: 400;
        text-align: center;
        margin: 80px 0;
    }

    .description {
        height: 687px;
        padding-left: 140px;
        overflow: hidden;
        color: #fff;
        margin: 0 121px;
        background: url('~@/assets/images/brandStory_desc_bg.png') no-repeat center;

        .title {
            font-size: 60px;
            line-height: 73px;
            font-weight: 700;
            margin-top: 130px;
            width: 650px;
        }

        .desc {
            font-size: 24px;
            line-height: 30px;
            font-weight: 400;
            margin-top: 33px;
            width: 650px;
        }

        .btn {
            font-size: 24px;
            line-height: 40px;
            font-weight: 600;
            margin-top: 44px;
            color: #846FC1;
            cursor: pointer;
        }
    }

    .ourMission,
    .ourVision {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 120px;

        .pic {
            width: 833px;
            height: 629px;
        }

        .cont {
            width: 662px;

            .title {
                font-size: 28px;
                font-weight: 700;
                line-height: 34px;
            }

            .subTitle {
                font-size: 48px;
                font-weight: 700;
                line-height: 65px;
                margin-top: 8px;
            }

            .desc {
                font-size: 28px;
                font-weight: 400;
                line-height: 42px;
                margin-top: 34px;
            }
        }
    }

    .ourMission {
        padding-left: 92px;
        margin-top: 90px;
    }

    .ourVision {
        padding-right: 36px;
        margin-top: 25px;
    }

    .ourCores {
        margin-top: 100px;

        .title {
            font-size: 60px;
            font-weight: 700;
            line-height: 65px;
            text-align: center;
        }

        .cont {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            flex-wrap: wrap;
            padding: 0 170px;

            .core {
                width: 448px;
                height: 472px;
                background: #C9BCF091;
                border-radius: 20px;
                text-align: center;
                margin-top: 60px;
                padding: 34px 60px 0;
                box-sizing: border-box;

                img {
                    width: 140px;
                }

                h3 {
                    font-size: 36px;
                    font-weight: 700;
                    line-height: 44px;
                    margin-top: 27px;
                }

                p {
                    font-size: 24px;
                    font-weight: 400;
                    line-height: 30px;
                    margin-top: 18px;
                }
            }
        }

        .filler {
            visibility: hidden;
        }
    }

    .future {
        margin-top: 150px;
        text-align: center;

        .title {
            font-size: 60px;
            font-weight: 700;
            line-height: 73px;
        }

        .desc {
            font-size: 32px;
            font-weight: 400;
            line-height: 39px;
            margin-top: 24px;
            margin-bottom: 34px;
        }
    }

    .others {
        display: flex;
        justify-content: space-between;
        margin: 85px 45px 70px;

        .left,
        .right {
            width: 900px;
            height: 1040px;
            box-sizing: border-box;
        }

        .left {
            background: url('~@/assets/images/brandStory_other_bg1.png') no-repeat center;
            padding: 0 110px;
            overflow: hidden;
            color: #fff;

            .title {
                font-size: 60px;
                font-weight: 700;
                line-height: 74px;
                margin-top: 104px;
            }

            .desc {
                font-size: 32px;
                font-weight: 400;
                line-height: 40px;
                margin-top: 20px;
            }

            .inputBox {
                margin-top: 40px;
                width: 668px;
                height: 88px;
                border-radius: 20px;
                background: #fff;
                display: flex;
                padding: 7px 10px;
                box-sizing: border-box;

                :deep(.el-input__wrapper) {
                    box-shadow: none;
                    font-size: 30px;
                }

                .submit {
                    width: 83px;
                    height: 74px;
                    background: #846FC1;
                    border-radius: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;

                    .el-icon {
                        font-size: 48px;
                    }
                }
            }

            .tips {
                margin-top: 16px;
                font-size: 20px;
                font-weight: 400;
                color: #A9A2A2;
            }
        }

        .right {
            background: url('~@/assets/images/brandStory_other_bg2.png') no-repeat center;
            padding-left: 122px;
            overflow: hidden;

            .title {
                font-size: 60px;
                font-weight: 700;
                line-height: 73px;
                margin-top: 104px;
            }

            .desc {
                font-size: 32px;
                font-weight: 400;
                line-height: 1;
                margin-top: 30px;
                color: #333333;
            }

            .btn {
                width: 264px;
                height: 76px;
                font-size: 24px;
                font-weight: 400;
                background: #846FC1;
                color: #fff;
                cursor: pointer;
                border-radius: 16px;
                text-align: center;
                line-height: 76px;
                margin-top: 30px;
            }
        }
    }
}

@media screen and (max-width: 750px) {

    .brandStory {
        .banner {
            height: 9.85rem;
            background: url('~@/assets/images/brandStory_banner_m.png') rgba(0, 0, 0, 1) no-repeat;
            background-size: cover;

            .bannerCont {
                text-align: center;
                width: 5.2rem;
                padding-bottom: 0.7rem;
                color: #fff;
                margin: 0 auto;

                .title {
                    font-size: 0.48rem;
                    line-height: 0.6rem;
                }

                .subTitle {
                    font-size: 0.32rem;
                    line-height: 0.4rem;
                    margin-top: 0.3rem;
                }
            }
        }

        .instructions {
            font-size: 0.28rem;
            line-height: 0.34rem;
            margin: 0.9rem;

            br {
                display: none;
            }
        }

        .description {
            height: 9.56rem;
            padding-left: 0;
            margin: 0;
            background: url('~@/assets/images/brandStory_desc_bg_m.png') no-repeat center;
            background-size: cover;
            padding: 0 0.9rem;

            .title {
                font-size: 0.48rem;
                line-height: 0.6rem;
                margin-top: 4rem;
                width: 100%;
            }

            .desc {
                font-size: 0.28rem;
                line-height: 0.34rem;
                margin-top: 0.2rem;
                width: 100%;
            }

            .btn {
                font-size: 0.2rem;
                line-height: 0.64rem;
                width: 2.2rem;
                margin: 0.25rem auto 0;
                color: #fff;
                background: #846FC1;
                border-radius: 0.32rem;
                font-weight: 400;
                text-align: center;
            }
        }

        .ourMission,
        .ourVision {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0;
            flex-wrap: wrap;

            .pic {
                width: 100%;
                height: auto;
            }

            .cont {
                width: 100%;
                order: 2;
                padding: 0 0.7rem;
                box-sizing: border-box;

                .title {
                    font-size: 0.28rem;
                    line-height: 0.34rem;
                    color: #595959;
                    margin-top: 0.6rem;
                }

                .subTitle {
                    font-size: 0.48rem;
                    line-height: 0.65rem;
                    margin-top: 0.1rem;
                }

                .desc {
                    font-size: 0.28rem;
                    line-height: 0.42rem;
                    margin-top: 0.3rem;
                    color: rgba(0, 0, 0, 0.8);
                }
            }
        }

        .ourMission {
            padding-left: 0;
            margin-top: 0.36rem;
        }

        .ourVision {
            padding-right: 0;
            margin-top: 0.6rem;
        }

        .ourCores {
            margin-top: 0.8rem;

            .title {
                font-size: 0.48rem;
                line-height: 0.6rem;
            }


            .cont {
                margin-top: 0.4rem;
                flex-wrap: wrap;
                padding: 0;

                :deep(.el-carousel) {
                    width: 100%;
                    .el-carousel__container {
                        height: 6rem;
                    }

                    .el-carousel__arrow {
                        bottom: auto;
                        top: 3rem;
                        border: 2px solid #fff;
                        color: #fff;
                        width: 0.74rem;
                        height: 0.74rem;
                        background: #999;
                        font-size: 0.3rem;
                    }

                    .el-carousel__arrow--right {
                        right: 0;
                        left: auto;
                    }

                    .el-carousel__arrow--left {
                        left: 0;
                    }
                }

                .core {
                    width: 6rem;
                    height: 6rem;
                    margin: 0 auto;
                    background: #C9BCF091;
                    border-radius: 0.2rem;
                    margin-top: 0;
                    padding: 0.49rem 0.7rem 0;
                    box-sizing: border-box;

                    img {
                        width: 1.84rem;
                    }

                    h3 {
                        font-size: 0.48rem;
                        line-height: 0.6rem;
                        margin-top: 0.3rem;
                    }

                    p {
                        font-size: 0.28rem;
                        line-height: 0.34rem;
                        margin-top: 0.2rem;
                    }
                }
            }

            .filler {
                visibility: hidden;
            }
        }

        .future {
            margin-top: 1.1rem;

            .title {
                font-size: 0.48rem;
                line-height: 0.65rem;
                padding: 0 0.52rem;
            }

            .desc {
                font-size: 0.28rem;
                line-height: 0.42rem;
                margin-top: 0.34rem;
                margin-bottom: 0.46rem;
                padding: 0 0.52rem;
            }
        }

        .others {
            display: flex;
            justify-content: space-between;
            margin: 0.36rem 0;
            flex-wrap: wrap;

            .left,
            .right {
                width: 100%;
                height: 8.66rem;
            }

            .left {
                background: url('~@/assets/images/brandStory_other_bg1_m.png') no-repeat center;
                background-size: cover;
                padding: 0 0.9rem;

                .title {
                    font-size: 0.48rem;
                    line-height: 0.56rem;
                    margin-top: 0.8rem;
                }

                .desc {
                    font-size: 0.28rem;
                    line-height: 0.32rem;
                    margin-top: 0.2rem;
                }

                .inputBox {
                    margin-top: 0.3rem;
                    width: 100%;
                    height: 0.72rem;
                    border-radius: 0.2rem;
                    padding: 0.06rem 0.12rem; 

                    :deep(.el-input__wrapper) {
                        font-size: 0.24rem;
                    }

                    .submit {
                        width: 0.7rem;
                        height: 0.6rem;
                        border-radius: 0.2rem;

                        .el-icon {
                            font-size: 0.4rem;
                        }
                    }
                }

                .tips {
                    margin-top: 0.16rem;
                    font-size: 0.2rem;
                }
            }

            .right {
                background: url('~@/assets/images/brandStory_other_bg2_m.png') no-repeat center;
                background-size: cover;
                padding: 0 0.8rem;

                .title {
                    font-size: 0.48rem;
                    line-height: 0.56rem;
                    margin-top: 0.87rem;
                }

                .desc {
                    font-size: 0.28rem;
                    line-height: 0.32rem;
                    margin-top: 0.2rem;
                }

                .btn {
                    width: 2.2rem;
                    height: 0.64rem;
                    font-size: 0.2rem;
                    border-radius: 0.32rem;
                    line-height: 0.64rem;
                    margin-top: 0.3rem;
                }
            }
        }
    }
}
</style>